<template>
  <div>
    <v-dialog :title="isEdit?'付款项目设置编辑':'付款项目设置新增'" :show.sync="dialogVisible" width="1200px">
      <div class="card-box">
        <el-form ref="editForm" :model="form" class="form-wrap" size="small" :rules="rules">
          <el-form-item label="付款项目类型" prop="paymentProjectType">
            <el-select v-model="form.paymentProjectType" placeholder="请选择">
              <el-option v-for="item in charge_project_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="付款项目名称" prop="paymentProjectName">
            <el-input v-model="form.paymentProjectName" maxlength="50" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="付款财务系统费用编码" prop="financeCode">
            <el-input v-model="form.financeCode" maxlength="50" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="付款日期设置" prop="receivablesDate">
            <el-date-picker v-model="form.receivablesDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="签订日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="取整方式" prop="roundingType">
            <el-select v-model="form.roundingType" placeholder="请选择">
              <el-option v-for="item in rounding_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="金额保留位" prop="keepType">
            <el-select v-model="form.keepType" placeholder="请选择">
              <el-option v-for="item in keep_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="foot">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-throttle=" [commit]">提 交</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import { addObj, putObj } from '../../../api/finance-manage-payment'
import { mapState } from 'vuex'
import BaseLoad from '@/assets/vue-mixin/BaseLoad'

export default {
  mixins: [BaseLoad],
  components: { engineerList },
  computed: {
    ...mapState({
      charge_project_type: state => {
        let data = state.dict.find(item => item.type === "charge_project_type") || {}
        let list = data.children || []
        return data.children || []
      },
      rounding_type: state => {
        let data = state.dict.find(item => item.type === "rounding_type") || {}
        let list = data.children || []
        return data.children || []
      },
      keep_type: state => {
        let data = state.dict.find(item => item.type === "keep_type") || {}
        let list = data.children || []
        return data.children || []
      },
    })
  },
  data () {
    return {
      fileSize: 50,
      formData: {},
      input: '',
      value: '',
      area: [],
      form: {
        paymentProjectType: '',
        paymentProjectName: '',
        financeCode: '',
        receivablesDate: '',
        roundingType: '',
        keepType: ''
      },
      dialogVisible: false,
      isEdit: false,
      rules: {
        paymentProjectType: [{ required: true, message: '请选择付款项目类型', trigger: 'blur' }],
        paymentProjectName: [{ required: true, message: '请输入付款项目名称', trigger: 'blur' }],
        financeCode: [{ required: true, message: '请输入付款财务系统费用编码', trigger: 'change' }],
        receivablesDate: [{ required: true, message: '请输入应收日期设置', trigger: 'change' }],
        roundingType: [{ required: true, message: '请选择取整方式', trigger: 'blur' }],
        keepType: [{ required: true, message: '请选择金额保留位', trigger: 'blur' }],
      }
    }
  },
  methods: {
    show (item) {

      this.dialogVisible = true
      setTimeout(() => {
        this.isEdit = false
        this.$refs.editForm.resetFields()
        delete this.form.propertyId
        if (item) {
          this.isEdit = true
          this.form = item
          Object.keys(this.form).forEach(key => {
            this.form[key] = item[key]
          })
          this.form.propertyId = item.propertyId
        }
      }, 200)

    },
    commit () {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            putObj(this.form).then(resp => {
              if (resp.data.data) {
                this.suc('提交成功')
                this.dialogVisible = false
                this.$emit('resetList')
              } else {
                this.err('提交失败')
              }
            })
          } else {
            addObj(this.form).then(resp => {
              if (resp.data.data) {
                this.suc('添加成功')
                this.dialogVisible = false
                this.$emit('resetList')
              } else {
                this.err('添加失败')
              }
            })
          }
        }
      })
    },
    beforeUpload () {
      this.loadAction('请稍等...')
    }
  }
}
</script>

<style lang='scss' scoped>
@include data-title();
@include info-list(2);
@include formWrap(3);
</style>
